<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">

		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> {{type==1?'素材库':'成品库'}}</text>
		</view>

		<!-- <view class="allSelect margin-top_40rpx">

			<uv-checkbox-group v-model="checkboxValue" shape="circle" @change="changeCheckAll">
				<uv-checkbox v-for="(item, index) in checkboxList" :key="index" :label="item.name"
					:name="item.name"></uv-checkbox>
			</uv-checkbox-group>
		</view> -->
		
		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback">
		
			<view class="solder flex-wrap-flex-start">
	
				<view class="text-align_center  margin-bottom_20rpx widthCalce"
					:style="{marginRight:((index+1) % 3)==0?'0':'0rpx'}" @click="goDetail(item)"
					v-for="(item,index) in list" :key="index">
					<image class="solderImg" :src="group3153" mode=""></image>
					<view class="font-overflow2" style="width: 200rpx;font-size: 26rpx;height: 77rpx;">
						{{item.name}}
					</view>
					<view class="" style="font-size: 26rpx;color: #898888;">
						{{item.create_time}}
					</view>
		
					<view class="flex-between margin-top_10rpx" v-if="mode!=2">
		
		
						<uv-checkbox-group shape="circle" v-model="radiovalue" @change="e=>changeCheck(e,index)">
							<uv-checkbox :name="item.id"></uv-checkbox>
						</uv-checkbox-group>
		
						<!-- <image class="editImg" :src="group3128" mode="" @click.stop="editFn(item.id)"></image> -->
					</view>
		
				</view>
		
			</view>
		</mescroll-body>



	<!-- 	<view class="solder flex-wrap-flex-start">

			<view class="text-align_center  margin-bottom_20rpx" :style="{marginRight:((index+1) % 3)==0?'0':'45rpx'}"
				@click="goDetail()" v-for="(item,index) in list" :key="index">
				<image class="solderImg" :src="group3153" mode=""></image>
				<view class="font-overflow2" style="width: 200rpx;font-size: 26rpx;height: 77rpx;">
					{{item.name}}
				</view>
				<view class="" style="font-size: 26rpx;color: #898888;">
					{{item.time}}
				</view>

				<view class="flex-between margin-top_10rpx">


					<uv-checkbox-group shape="circle" v-model="radiovalue" @change="e=>changeCheck(e,index)">
						<uv-checkbox :name="item.id"></uv-checkbox>
					</uv-checkbox-group>

					<image class="editImg" :src="group3128" mode=""></image>
				</view>

			</view>



		</view> -->
		
		<view  v-if="mode!=2" class="c-but flex" @click="complete()">完成</view>

	<!-- 	<view class="v-call">
			<view class="flex-around">
				<view class="flex-column" @click="goTo(1)">
					<image class="addSolder" src="/static/one/组合 3148.png" mode=""></image>
					<view style="font-size: 26rpx;margin-top: 10rpx">新建文件夹</view>

				</view>
				<view class="flex-column" @click="deleteFn()">
					<image class="addSolder" src="/static/one/组合 3150.png" mode=""></image>
					<view style="font-size: 26rpx;margin-top: 10rpx;">删除文件夹</view>

				</view>
			</view>
		</view> -->


		<sunui-popup ref="pop">
			<template v-slot:content>
				<view class="v-pop-cls">
					<view class="margin-bottom_50rpx font-size_36rpx display-a-jc">新建文件夹</view>
					<view class="display-a-js">
						<view>
							文件夹名称
							<span class="must">*</span>
						</view>
						<input style="height: 76rpx;padding: 0 22rpx;" type="text" v-model="fileName"
							class="input-frame" placeholder="请输入文件夹名称" placeholder-class="placeholder" />
					</view>


					<view class="sunui-flex-space-around margin-top_60rpx">
						<view class="confirm-btn" @click="confirm()">确认</view>
						<view class="cancel-btn" @click="cancel()">取消</view>
					</view>
				</view>
			</template>
		</sunui-popup>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				group3153:this.$imgs.group3153,
				group3128:this.$imgs.group3128,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				arr: [],
				radiovalue: [],
				checkboxValue: '',
				// 基本案列数据
				checkboxList: [{

					disabled: false,
					name: '全选'
				}],
				list: [],
				title:'',
				selIndex:'',
				projectId:'',
				type:'',
				mode:''
			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			
			this.selIndex=options.index
			this.type=options.type
			this.mode=options.mode
			
			console.log(options)

		},
		computed: {


		},
		
		onShow() {
		
			
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		
		},
		methods: {
			
			async upCallback(scroll) {
			
				const result = await this.$http.get({
					url: this.$api.folderPage,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						type: this.type,
						page: scroll.num,
						psize: 10,
			
			
			
			
					}
				});
				if (result.errno == 0) {
			
					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					this.list = this.list.map((item, index) => {
						return {
							name: item.name,
							create_time: item.create_time,
							id: item.id,
							index: index
						}
					})
					console.log(this.list)
			
				}
			},
			
			
			complete(){
				if(this.radiovalue.length){
					
					// 判断当前是否 有视频
					
					if(this.type==1){
						this.getVideoCountFnSc(this.projectId)
						
					}else{
						this.getVideoCountFn(this.projectId)
					}
					
					
				}else{
					this.$sun.toast('请勾选一个文件夹','none')
				}
			},
			
			async getVideoCountFn(projectId) {
				const result = await this.$http.get({
					url: this.$api.getVideoCount,
					data: {
						uid: uni.getStorageSync("uid"),
						product_folder_id: projectId
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					if(result.data){
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						prevPage.$vm.otherFuns(JSON.stringify({
							title:this.title,
							selIndex:this.selIndex,
							projectId:this.projectId,
							
							
						})); //重点$vm
						
						setTimeout(()=>{
							uni.navigateBack();
						},500)
					}else{
						this.$sun.toast('当前文件夹没有视频请添加视频后在选择','none')
					}
				} else {
			
					this.$sun.toast(result.message, 'none')
				}
			},
			
			// 合成视频数量
			async getVideoCountFnSc(projectId) {
				const result = await this.$http.get({
					url: this.$api.getVideoCountSc,
					data: {
						uid: uni.getStorageSync("uid"),
						resource_folder_id: projectId
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					if(result.data){
						var pages = getCurrentPages();
						var prevPage = pages[pages.length - 2]; //上一个页面
						prevPage.$vm.otherFuns(JSON.stringify({
							title:this.title,
							selIndex:this.selIndex,
							projectId:this.projectId,
							
							
						})); //重点$vm
						
						setTimeout(()=>{
							uni.navigateBack();
						},500)
					}else{
						this.$sun.toast('当前文件夹没有视频请添加视频后在选择','none')
					}
				} else {
			
					this.$sun.toast(result.message, 'none')
				}
			},
			
			
			navBack(){
				this.$sun.navBack()
			},
			changeCheck(e, index) {
				console.log(e, index)
				
				this.projectId=e[0]
				
				
				
				
				
				if(this.arr.includes(index)){
					
					 let a = this.arr.indexOf(e[0]);  // 查找索引
					 this.arr.splice( a, 1);
					if(this.arr!=-1){
						 this.radiovalue = []
					}
					
				}else{
					// this.arr.push(index)
					this.title=this.list[index]?.name
					 
					console.log(this.arr,this.title)
					
					this.radiovalue = e
				}
				if (this.radiovalue.length == this.folderPage.length) {
					this.checkboxValue = ['全选']
				}
			
				

				


			},
			changeCheckAll(e) {
				console.log(e[0])
				
				if(e[0]=='全选'){
					let ids = this.list.map(item => item.id);
					this.radiovalue=ids
				}else{
					this.radiovalue=[]
					this.arr=[]
				}
			},


			deleteFn() {
				uni.showModal({
					title: '是否确定要删除',
					content: '是否要删除该文件夹，如果删除，将不可恢复，请您谨慎选择',
					success: async (res) => {
						if (res.confirm) {


						} else if (res.cancel) {

						}
					}
				});
			},
			goDetail(item) {
				console.log(item)
				if(this.mode==2){
					this.$sun.navGo('/pagesA/creatCenter/material/SelmaterialCenterDetail', {
						info: JSON.stringify({...item,selIndex:this.selIndex})
					})
				}
				
				
			
			},
			changeBox(e) {
				console.log(e)
			},
			confirm() {
				this.$refs.pop.close()
			},
			cancel() {
				this.$refs.pop.close()
			},

			// type 1:新建文件夹 2:删除文件夹 3:上传素材 4:素材搬家
			goTo(type) {
				console.log('点击========type', type);
				if (type == 1) {
					this.$refs.pop.show({
						anim: 'center',
						shadeClose: false,
						topclose: false
					});
				}
				if (type == 2) {
					let ids = [];
					this.fileList.map(d => {
						if (d.checked) {
							ids.push(d.id);
						}
					});
					console.log('ids', ids, ids.length, 'ids.length <= 0', ids.length <= 0);
					if (ids.length <= 0) {
						this.$sun.toast('请选择文件夹', 'none');
						return;
					}
					uni.showModal({
						title: '提示',
						content: '确定要删除文件夹吗',
						success: async res => {
							if (res.confirm) {
								const result = await this.$http.post({
									url: this.$api.batchDelete,
									data: {
										ids: ids
									}
								});
								if (result.code == 2000) {
									this.$sun.toast('删除成功');
									setTimeout(() => {
										this.$at.releaseKey('submit');
										this.query();
									}, 1000);
								} else {
									this.$sun.toast(result.msg, 'none');
									this.$at.releaseKey('submit');
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					/* this.$at.uniDoFunc({
						key: 'submit',
						success: async () => {
							this.$at.lockKey('submit');
							// 筛选选中的文件
							this.delFile(ids);
						}
					}); */
				}
				if (type == 3) {
					this.$sun.navGo('/pagesA/cloudFlashPush/collect/taskPage/taskPage', {
						hideType: this.types
					});
				}
				if (type == 4) {
					let ids = [];
					this.fileList.map(d => {
						if (d.checked) {
							ids.push(d.id);
						}
					});
					this.moveQueryId = ids;
					console.log('ids', ids, ids.length, 'ids.length <= 0', ids.length <= 0);
					if (ids.length <= 0) {
						this.$sun.toast('请选择文件夹', 'none');
						return;
					}
					if (ids.length > 1) {
						this.$sun.toast('素材搬家仅需选1个文件夹', 'none');
						return;
					}
					this.queryUserFile();
				}
			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;

		// “新建文件夹” 弹框
		.v-pop-cls {
			padding: 40rpx 26rpx 60rpx;
			border-radius: 20rpx;
			width: 644rpx;
			background-color: #fff;

			.must {
				color: red;
				margin-left: 8rpx;
			}

			.radio-cls {
				transform: scale(0.8);
			}

			.input-frame,
			.no-input-frame {
				padding: 20rpx;
				border-radius: 10rpx;
				width: 360rpx;
			}

			.input-frame {
				border: 2rpx solid #d9d9d9;
			}

			.no-input-frame {
				background: #f0f0f0;
				border: 2rpx solid #f0f0f0;
			}

			.input-frame2 {
				width: 400rpx;
			}
		}

		.allSelect {
			position: absolute;
			right: 20rpx;
		}

		.solder {
			margin-top: 45rpx;
				width: 700rpx;
					.widthCalce{
						width: calc(100% /3);
					}

			.solderImg {
				width: 149.24rpx;
				height: 149.3rpx;
			}

			.editImg {
				width: 34.02rpx;
				height: 34rpx;
			}

		}
		
		.c-but {
		
			font-weight: 700;
		
			padding: 20rpx 40rpx;
		
			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;
			
			z-index: 999;
			
			
			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, #6475FF, #7464FF 100%);
		}

		.v-call {
			font-size: 29rpx;
			font-weight: 700;
			border-radius: 140rpx;
			padding: 20rpx 40rpx;
			background: #FFFFFF;
			color: #442D25;
			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 6%;
			border: none;

			z-index: 999;

			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);

			.addSolder {
				width: 40.3rpx;
				height: 40.3rpx;
			}

		}

	}
</style>